import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/Addons.js";

//设置大小
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

//响应式变化
window.addEventListener("resize", () => {
  sizes.height = window.innerHeight;
  sizes.width = window.innerWidth;

  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  renderer.setSize(sizes.width, sizes.height);
});

//1.创建场景
const scene = new THREE.Scene();

//2.创建网格
//2.1几何体
const geo = new THREE.BoxGeometry(1, 1, 1);
//2.2创建材质
const met = new THREE.MeshBasicMaterial({
  color: "red",
});
//2.3拼接网格
const mesh = new THREE.Mesh(geo, met);

//把网格加入场景
scene.add(mesh);

//3.创建摄像机
const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  100
);
camera.position.z = -5;
camera.lookAt(mesh.position);

//将相机加入到场景
scene.add(camera);

//4.渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(sizes.width, sizes.height);
renderer.domElement.setAttribute("class", "my-canvas");
document.body.appendChild(renderer.domElement);

//extra 摄像机控制器
const control = new OrbitControls(camera, renderer.domElement);
//开启阻尼
control.enableDamping = true;

//5.动画效果
const change = () => {
  control.update();

  renderer.render(scene, camera);
  window.requestAnimationFrame(change);
};

change();
